import { Layout, Menu } from "@arco-design/web-react";
import React, { useState } from "react";

import PanelBase from "../panel/panel-base";

const MenuItem = Menu.Item;
const Sider = Layout.Sider;

export default function SideBarIndex({ panelConfig }) {
	const [menuIndex, setMenuIndex] = useState(0);
	const menuItemClick = index => {
		setMenuIndex(parseInt(index, 10));
	};

	return (
		<>
			<Sider style={{ width: "64px" }}>
				<Menu
					mode="vertical"
					defaultSelectedKeys={["0"]}
					onClickMenuItem={menuItemClick}
					style={{
						height: "100%"
					}}>
					{panelConfig.map((item, index) => {
						return (
							<MenuItem key={index}>
								{item.icon}
								<span className="acro-icon-title">{item.label}</span>
							</MenuItem>
						);
					})}
				</Menu>
			</Sider>
			<div className={"arco-layout-sider arco-layout-sider-light"} style={{ width: "206px", marginLeft: "1px", display: "block" }}>
				{panelConfig.map((item, index) => {
					return (
						<PanelBase
							key={index}
							type={item.type}
							data={item.body}
							style={{
								display: `${menuIndex === index ? "block" : "none"}`
							}}></PanelBase>
					);
				})}
			</div>
			<style global jsx>
				{`
					.arco-layout-sider-light {
						display: block;
						overflow: hidden;
					}

					.arco-layout-sider-light .panel {
						height: 100%;
						overflow: hidden;
					}

					.arco-layout-sider-light .panel .panel-header {
						padding: 5px;
						overflow: hidden;
						border-bottom: 1px solid #eee;
					}

					.arco-menu .arco-menu-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 6px 12px;
					}

					.arco-menu .arco-menu-item .arco-icon {
						width: 24px !important;
						height: 24px !important;
						margin: 0;
					}

					.arco-menu .arco-menu-item .acro-icon-title {
						height: 24px;
						line-height: 24px;
					}
				`}
			</style>
		</>
	);
}
